<template>
  <div class="Area">
    <el-card shadow="never" class="Area__card">
      <div slot="header" class="Area__card__header">
        <el-radio-group class="Area__card__header__right">
          <el-radio border :label="3">周报表</el-radio>
          <el-radio border :label="6">月度报表</el-radio>
          <el-radio border :label="9">季度报表</el-radio>
          <el-radio border :label="0">年度报表</el-radio>
        </el-radio-group>
        <div class="Area__card__header__left">
          <el-date-picker style="width:128px;margin-right: 32px;" type="date" placeholder="起始日期"></el-date-picker>
          <el-date-picker style="width:128px;" type="date" placeholder="结束日期"></el-date-picker>
        </div>
      </div>
      <div class="Area__table" ref="table">
        <el-table :data="tableData"
          header-row-class-name="Area__table__header"
          row-class-name="Area__table__row"
          style="width: 100%">
            <el-table-column prop="leimu_select" label="品牌名称">
            </el-table-column>
            <el-table-column prop="band_select" label="商品数量">
            </el-table-column>
            <el-table-column prop="sale_money" label="销售额">
            </el-table-column>
            <el-table-column prop="sale_num" label="销量">
            </el-table-column>
            <el-table-column prop="view_num" label="采购数量">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text">合并品牌</el-button>
              </template>
            </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
              leimu_select: '类目',
              band_select: '品牌',
              goods_select: '商品名称',
              cust_select: '商家名称',
              sale_money:'99.999',
              sale_num:'99.999',
              view_num:'99.999',
          },
          {
            leimu_select: '类目',
            band_select: '品牌',
            goods_select: '商品名称',
            cust_select: '商家名称',
            sale_money:'99.999',
            sale_num:'99.999',
            view_num:'99.999',
          },
          {
            leimu_select: '类目',
            band_select: '品牌',
            goods_select: '商品名称',
            cust_select: '商家名称',
            sale_money:'99.999',
            sale_num:'99.999',
            view_num:'99.999',
          }
        ],
      }
    },
  }
</script>

<style lang="scss" scoped>
.Area {
  padding: 26px 54px;
  height: 100%;
  background-color: #f5f9fe;
  &__table {
    & /deep/ {
      .el-card__body {
        padding-top: 0;
      }
      .el-table::before {
        display: none;
      }
      .Area__table__header {
        th {
          text-align: center;
          font-size: 16px;
          color:#409EFF;
          border-bottom: none;
          &:not(:first-child) {
            .cell {
              border-left: 1px solid #dadada;
            }
          }
        }
      }
      .Area__table__row {
        td {
          text-align: center;
          font-size: 16px;
          color:#409EFF;
          border-bottom: none;
        }
        .el-button--text {
          font-size: 16px;
          padding: 0;
        }
      }
    }
  }
  &__card {
    &__header {
      line-height: 25px;
      padding-bottom: 15px;
      &__right {
        float: right;
      }
      & /deep/ {
        .el-button--primary {
          border-radius: 9px;
          width: 70px;
          padding: 5px 20px;
        }
        .el-input__icon {
          height: 25px;
          line-height: 25px;
        }
        .el-input__inner{
          height: 25px;
          line-height: 25px;
          background-color: #f0f5fb;
	        border-radius: 9px;
          border: none;
        }
        .el-radio-group {
          .is-bordered {
            padding: 0 6px;
            height: 25px;
            line-height: 25px;
            border: none;
            .el-radio__label {
              font-size: 16px;
              color: #409EFF;
            }
          }
        }
      }
    }
  }
}
</style>

